<style>
    .ly-table-filter {
        background: #fff;
        padding: 4px 20px 20px 20px;
        margin: 10px 10px 0;
        border-radius: 8px;
    }
    .top-bar-full     .ly-table-filter {
        margin: 0 10px;
    }
    .ly-table-filter .flex {
        display: flex;
    }
    .main-box .ly-table-filter{
        margin: 0;
        padding: 4px 10px 20px 10px;
    }
    .main-box .ly-table-filter.ly-table-filter-bg{
        padding: 4px 20px 20px 20px;
        background: #f8f8f8;
    }
    .ly-table-filter .el-radio-group {
        margin-left: 0;
        padding-left: 0;
        margin-bottom: 0;
    }
    .ly-table-filter .el-input__inner {
        height: 32px;
        line-height: 32px;
    }
    .ly-table-filter .main-box-comp {
        margin: 0 !important;
    }
    .ly-table-filter .el-range-editor.el-input__inner {
        padding: 0 15px;
    }
    .ly-table-filter .el-form-item__content, .ly-table-filter .el-cascader, .ly-table-filter .el-form-item__label, .ly-table-filter .el-range__icon, .ly-table-filter .el-range-separator {
        line-height: 32px;
    }
    .ly-table-filter .filter-search {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
    }
    .ly-table-filter .ly-page-main-comp {
        width: auto !important;
        height: auto !important;
    }
    /* 输入框获得焦点边框变色 */
    .ly-table-filter .el-input .el-input__inner:focus {
        border-color: var(--primary);
    }
    /* 筛选项tab */
    .ly-table-filter .filter-navi:not(:empty) {
        margin-top: 16px;
        padding-bottom: 4px;
    }
    .ly-table-filter .filter-navi.only-tab {
        padding-bottom: 0;
    }
    .ly-table-filter .el-radio-group {
        margin-left: 0;
    }
    .ly-table-filter .el-radio-button__inner {
        min-width: 88px;
        height: 32px;
        line-height: 32px;
        padding: 0 15px;
        color: #111;
        font-size: 14px;
    }
    /* 统一边距 */
    .ly-table-filter .el-form-item {
        margin: 16px 16px 0 0;
    }
    /* 统一按钮样式 */
    .ly-table-filter .el-input .el-input__inner {
        max-width: 209px;
        background: #fff;
        border-radius: 4px;
        border: 1px solid #d9d9d9;
    }
    .ly-table-filter .el-form-item__content:first-child {
        display: flex;
        align-items: center;
    }
    /* 带表头输入框样式 */
    .ly-table-filter  .el-select:not(:last-child) .el-input .el-input__inner {
        background: #f7f7f7;
        border-radius: 6px 0 0 6px;
        border: 1px solid #d9d9d9;
        border-right: 0 none;
        padding-right: 0;
        color: #999;
    }

    .ly-table-filter .el-select:not(:last-child) {
        width: 100px;
        height: 32px;
    }
    /* 按钮样式 */
    .ly-table-filter .filter-btn {
        padding-top: 16px;
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-width: 600px;
    }
    .ly-table-filter .common-btn {
        display: flex;
        align-items: center;
    }
    .ly-table-filter .search {
        background: var(--primary);
        margin-right: 8px;
        color: #fff;
    }
    .ly-table-filter .filter-btn .reset {
        padding: 5px 16px;
        box-sizing: border-box;
        border: 1px solid #d9d9d9;
        background-color: #fff;
        color: #111;
    }
    .ly-table-filter .filter-btn .top-btn {
        display: flex;
        align-items: center;
    }
    .ly-table-filter  .el-select:not(:last-child)+.el-input .el-input__inner{
        border-radius: 0 4px 4px 0;
    }
    .ly-table-filter .el-select:not(:last-child)+.el-date-editor{
        border-radius: 0 4px 4px 0;
    }
    .ly-table-filter  .el-select:not(:last-child)+.el-input{
        width: auto;
    }

    .ly-table-filter  .el-button {
        padding: 9px 15px;
        font-size: 12px;
        border-radius: 3px;
    }

</style>
<template>
    <div class="ly-table-filter" :class="{'ly-table-filter-bg':background}" :style="{ 'margin-bottom': mb + 'px' }">
        <div class="filter-navi" >
            <slot name="top"></slot>
        </div>
        <el-form class="filter-search" :inline="true" @submit.native.prevent>
            <slot></slot>
            <div class="filter-btn">
                <div class="common-btn" style="flex: 1">
                    <el-button v-if="hasSearch" type="primary" @click="search" size="small">
                        查询
                    </el-button>
                    <el-button  v-if="hasReset"  @click="reset" size="small">
                        重置
                    </el-button>
                    <slot name="extra">

                    </slot>
                </div>
                <div class="flex">
                    <el-button v-if="hasAdd" type="primary" @click="add" size="small">
                        {{addText}}
                    </el-button>
                    <slot name="actions">

                    </slot>
                </div>

            </div>
        </el-form>
    </div>
</template>
<script>
    Rap.define('', function () {
        return {
            name: 'ly-table-filter',
            props: {
                addText:{
                    type: String,
                    default: '添加',
                },
                background: Boolean,
                mb: {
                    type: [String,Number],
                    default: '10',
                }
            },
            data: function () {
                return {
                    hasSearch: false,
                    hasReset: false,
                    hasAdd: false,
                };
            },
            created: function () {
                this.hasSearch = this.$listeners.search;
                this.hasReset = this.$listeners.reset;
                this.hasAdd = this.$listeners.add;
            },
            mounted: function () {},
            methods: {
                search: function () {
                    this.$emit('search');
                },
                reset: function () {
                    this.$emit('reset');
                },
                add: function () {
                    this.$emit('add');
                }
            }
        }
    });
</script>


